import React, { FC, useEffect, useRef, useState } from 'react'
import './index.scss'
import Img from '../../assets/images/503.png'
import { useCountDown } from 'ahooks'
import { history } from 'umi'
import { useTimeDown } from '@/hooks/useTimeDown'
import { Progress } from 'antd'
import { useInterval } from 'ahooks';


interface spanObj {
    left: string,
    top: string,
    transform: string,
    animationDelay: string,
    background: string
}
const BadServe: FC = () => {
    const bgstar: any = useRef()

    const [spanList, setSpanList] = useState<spanObj[]>([])

    const [percent, setPercent] = useState<number>(0)

    const [countDown] = useTimeDown(6000, () => {
    })


    const getSpanListInit = () => {
        let width = bgstar.current.clientWidth;
        let height: any = document.getElementById('bgstar')?.clientHeight;
        for (var i = 0; i < 520; i++) {
            var left = Math.round(Math.random() * width)
            var top = Math.round(Math.random() * height)

            var scaler = Math.random() * 1.5;
            var rate = Math.random() * 2.5;

            var r = Math.random() * 255;
            var g = Math.random() * 255;
            var b = Math.random() * 255;
            var a = Math.random()

            spanList.push({
                left: left + 'px',
                top: top + 'px',
                transform: `scale('${scaler}')`,
                animationDelay: rate + 's',
                background: `rgba(${255},${255},${255},${a})`
            })
        }
        setSpanList([...spanList])
    }

    useInterval(() => {
        if (percent < 100) {
            setPercent(percent + 5)
        } else {

            history.push('/login')
        }
    }, 250)


    useEffect(() => {
        getSpanListInit()

    }, [])
    return (
        <div className='errorpage' id="bgstar" ref={bgstar} >
            <img src={Img} alt="" className="myimg" />
            {
                spanList.map((l, i) => {
                    return (
                        <span key={i} className="spandot" style={l} ></span>
                    )
                })
            }
            <div className="down" onClick={() => history.push('/login')}>
                {countDown} S后跳转
            </div>

            <div className="dao" >
                <Progress

                    strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
                    type="circle"
                    width={60}
                    percent={percent}
                    style={{ marginRight: 8 }}
                />
            </div>
        </div>
    )
}

export default BadServe